<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { showToast, type ActionSheetAction } from 'vant'
import base64ToBlob from 'b64-to-blob'
import { http } from '@/apis/Http';
import { useNameIntroStore } from "../stores/name_intro"
import { updateUser } from '@/apis/updateUser';

const store = useNameIntroStore()

const user = ref<User>({} as User)

// 头像相关
const actions = [
  { name: '拍照' },
  { name: '相册' }
]
const showAvatarSheet = ref(false)
const onClickAvatar = () => {
    showAvatarSheet.value = true
}
const onSelect = async (action: ActionSheetAction, index: number) => {
  try {
    let res = ''
    if (index === 0) {
      res = await app.pickerCamera()
    } else if (index === 1) {
      res = await app.pickerPhoto()
    }
    const image = base64ToBlob(res, 'image/jpeg')
    const fd = new FormData()
    fd.append('photo', image, Date.now() + '.jpeg')
    const response = await http.patch<Response<{ id: string, photo: string }>>('/v1_0/user/photo', fd, { headers: { "Content-Type": "multipart/form-data"} })
    user.value.photo = response.data.data.photo
    app.updateUser(user.value)
  } catch (err) {
    showToast({ message: '上传头像失败' })
  }
}

// 性别相关
const showGenderPop = ref(false)
const selectedGender = ref<string[]>([])
const genderList = [
    { text: '男', value: 0 },
    { text: '女', value: 1 },
]
const getGender = () => {
  if (user.value.gender != undefined) {
    return user.value.gender ? '女' : '男'
  } else {
    return ''
  }
}
const onGenderConfirm = async ({ selectedValues }: any) => {
  user.value.gender = selectedValues.join('') === '0' ? 0 : 1
  await updateUser(user.value)
  app.updateUser(user.value)
  showGenderPop.value = false
}

// 生日相关
const showBirthdayPop = ref(false)
const currentDate = ref(['2000', '11', '13'])
const minDate = new Date(1970, 1, 1)
const maxDate = new Date(2026, 1, 1)
const onBirthdayConfirm = async () => {
  user.value.birthday = currentDate.value.join('-')
  await updateUser(user.value)
  app.updateUser(user.value)
  showBirthdayPop.value = false
}

// 退出登录方法
const onLogout = () => {
  user.value = {} as User
  store.name = ''
  store.intro = ''
  app.removeUser()
}

// onMounted 方法
onMounted(() => {
    user.value = app.queryUser()
    user.value.real_name = 'gl'
    currentDate.value = user.value.birthday.split('-')
})
</script>

<template>
  <div class="column">
  <!-- 底部拍照、相册交互弹框 -->
    <van-action-sheet
      v-model:show="showAvatarSheet"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="showAvatarSheet=false"
      @select="onSelect"
    />

    <!-- 性别选择弹框 -->
     <van-popup
     v-model:show="showGenderPop"
     position="bottom"
     ><van-picker
        title="选择性别"
        :columns="genderList"
        v-model="selectedGender"
        @confirm="onGenderConfirm"
        @cancel="showGenderPop=false"
    /></van-popup>

    <!-- 生日选择弹框 -->
    <van-popup
     v-model:show="showBirthdayPop"
     position="bottom"
     ><van-date-picker
        v-model="currentDate"
        title="选择生日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onBirthdayConfirm"
        @cancel="showBirthdayPop=false"
    /></van-popup>

    <van-cell-group class="top-part">
      <van-cell title="头像" is-link @click="showAvatarSheet=true">
        <template #value>
          <van-image round width="25" height="25" :src="user.photo" />
        </template>
      </van-cell>
      <van-cell title="昵称" is-link :value="store.name" to="/edit/name"></van-cell>
      <van-cell title="简介" is-link :value="store.intro" to="/edit/intro"></van-cell>
    </van-cell-group>

    <van-cell-group class="bottom-part">
      <span>
        <van-cell title="性别" is-link :value="getGender()" @click="showGenderPop=true"></van-cell>
        <van-cell title="生日" is-link :value="user.birthday" @click="showBirthdayPop=true"></van-cell>
      </span>
      <h4 class="logout-btn" @click="onLogout">退出登录</h4>
    </van-cell-group>
  </div>
</template>

<style lang="css" scoped>
.column {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保父容器占满整个视口 */
}

.top-part {
  flex-shrink: 0; /* 防止顶部区域被压缩 */
  margin-bottom: 20px;
}

.bottom-part {
  flex: 1; /* 关键属性 - 占据剩余空间 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 内容在垂直方向分布 */
  overflow: hidden; /* 隐藏溢出内容 */
}

.logout-btn {
  align-self: center;
  margin-bottom: 20px;
  text-align: center;
  padding: 10px 30px;
  color: #e47135;
}

span{
  border-bottom: 0.5px solid #e0e0e0;
}
</style>
